<template>
  <div class="home mt-4 colCol p-0 w-0" style="width: 100vw;">
    <!-- 以一档百 -->
    <div class="container d-flex flex-column  justify-content-center" style="padding: 60px 0;">
      <div class="row py-4 m-2">
        <div class="col text-center">
          <h2>以一挡百，以简驱繁</h2>
        </div>
      </div>
      <div class="row align-items-center">
        <div class="col-sm-4 d-flex justify-content-center" v-for="item in barhunList" :key="item.imgUrl">
          <div class="position-relative">
            <img class="img-overlay" :src="item.imgUrl" alt="" />
            <img class="bg-image col-md-w-75" src="https://www.fluxmq.com/static/img/character-bg.044abd53.svg"
              alt="" />
            <div class="container d-flex justify-content-center flex-column align-items-center con_text px-4">
              <div class="row ">
                <h4 class="text-center my-3">{{ item.title }}</h4>
              </div>
              <div class="row f-flex justify-content-center">
                <div class="text-center" style="width: 78%;font-size: .9em;">{{ item.content }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 10px;" class="p-0 m-0">
      <img class="container-fluid p-0 m-0" :src="brUrl" alt="">
    </div>

    <!-- 解决方案 -->
    <div class="container-fluid p-0 m-0 bt-0" style="width: 100%;">
      <div class="row m-0 py-4  pt-0" style="background-color: #f5f8fa">
        <div class="col-12 mt-4 text-center">
          <h2>更有效的物联网解决方案</h2>
        </div>
      </div>
      <div class="row m-0 d-flex text-center justify-content-center align-items-center"
        v-for="(item, index) in     solutionList    " :key="item.conImg"
        :style="{ backgroundColor: (index % 2 == 1 ? '#fff' : '#f5f8fa') }">
        <div class="containe">
          <div class="row d-flex align-items-center" :class="{ 'flex-row-reverse': index % 2 == 1 }">
            <!-- 左边 -->
            <div class="col-md-2"></div>
            <div class="col-md-4">
              <div class="container">
                <div class="row col-12 d-flex align-items-center">
                  <img class="mr-2" style="width: 20%;height: auto;" :src="item.titImg" alt="">
                  <h3>{{ item.title }}</h3>
                </div>
                <div class="row my-4">
                  <div class="col-md-11 col-12 text-left" style="line-height: 26px;">{{ item.content }}</div>
                </div>
              </div>
            </div>
            <!-- 右边 -->
            <div class="col-md-4  w-100">
              <img class="mt-2" style="width: 95%;" :src="item.conImg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 信赖关系 -->
    <div class="count_on">
      <div class="container ">
        <div class="row d-flex flex-column" style="width: 100%;">
          <div class="col">
            <h4>我们信赖开放的关系</h4>
          </div>
          <div class="col mt-3">支持开源生态组件集成使用，让FluxMQ成为你数据资产构建的桥梁</div>
        </div>
        <div class="row count_bgc">
          <div class="container">
            <div class="row d-flex justify-content-md-center justify-content-start">
              <div class="col-sm-1-5 row-cols-1 d-md-block d-none" v-for=" item in countList" :key="item">
                <img :src="item" alt="">
              </div>
              <div class="col-6 row-cols-1 d-md-none d-block align-items-start" v-for=" item in countList" :key="item">
                <img :src="item" alt="" class="text-left">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  name: 'HomeView',
  data() {
    return {

      brUrl: 'https://www.fluxmq.com/static/img/line.4699f45b.svg',
      barhunList: [
        { imgUrl: 'https://www.fluxmq.com/static/img/character-1.f5be2269.svg', title: '高性能', content: '支持百万/千万级数据并发接入，毫秒级实时转发，超低延迟' },
        { imgUrl: 'https://www.fluxmq.com/static/img/character-2.a77f29e7.svg', title: '高易用性', content: '兼容协议插件化，支持各种数据桥接和各种数据库持久化，JAVA语言更易拓展' },
        { imgUrl: 'https://www.fluxmq.com/static/img/character-3.480b94f8.svg', title: '多协议支持', content: '支持通用的MQTT，COAP等协议；还支持OPC，Modbus等工业协议' },
      ],
      //物联网解决方案
      solutionList: [
        { conImg: 'https://www.fluxmq.com/static/img/solution-2.34b9794a.png', titImg: 'https://www.fluxmq.com/static/img/solution-1.ba515387.svg', title: '连接', content: '多协议支持：支持MQTT、HTTP、Websocket等主流协议安全接入：支持TLS、DTLS加密协议保证数据传输安全高性能：毫秒级实时数据路由，百万千万级别高性能消息吞吐' },
        { conImg: 'https://www.fluxmq.com/static/img/move-2.22de1a5b.png', titImg: 'https://www.fluxmq.com/static/img/move-1.cba29e5e.svg', title: '移动', content: '基于主题的发布/订阅消息双向传递支持高性能集群，转发百万数据量 多种端到端的QoS消息传递保证，包括最多一次，至少一次' },
        { conImg: 'https://www.fluxmq.com/static/img/deal-2.ea1b3458.png', titImg: 'https://www.fluxmq.com/static/img/deal-1.93236163.svg', title: '处理', content: '使用简单标准的SQL语句来提取、\\r过滤、转换数据采用数据桥接架构，快速灵活集成物联网数据到各种企业系统 支持多种时序数据库和关系数据库持久化' },
        { conImg: 'https://www.fluxmq.com/static/img/testing-2.815e42c4.png', titImg: 'https://www.fluxmq.com/static/img/testing-1.f24a70b6.svg', title: '监测', content: '支持Grafana+Prometheus等第三方监测组件支持数据接入，桥接等全方位监测 提供监测数据接口集成' },
      ],
      //信赖开放
      countList: ['https://www.fluxmq.com/static/img/partner-github.9c97fa44.png', 'https://www.fluxmq.com/static/img/partner-gitlab.33584834.png', 'https://www.fluxmq.com/static/img/partner-java.bd150383.png', 'https://www.fluxmq.com/static/img/partner-Influxdb.3aa3e838.png',
        'https://www.fluxmq.com/static/img/partner-kafka.c46c2013.png', 'https://www.fluxmq.com/static/img/partner-pulsar.ce59a0c5.png', 'https://www.fluxmq.com/static/img/partner-td.59a84062.png', 'https://www.fluxmq.com/static/img/partner-td.59a84062.png', 'https://www.fluxmq.com/static/img/partner-clickhouse.0283b128.png']
    }
  }
}
</script>

<style lang="scss">
.colCol {
  color: #4a4a4a
}

.img-overlay {
  width: 12%;
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(-50%, -50%);

}

.bg-image {
  width: 100%;
}

.con_text {
  width: 100%;
  position: absolute;
  top: 40%;
}

.count_on {
  width: 100%;
  padding: 100px 0;
  background-color: #f5f8fa;

}

.count_bgc {
  width: 100%;
  background-image: url(https://www.fluxmq.com/static/img/partner-bg.97c2d7f1.png);
}

.col-md-1-5 img {
  width: 100%;
}

.col-xs-1-5,
.col-sm-1-5,
.col-md-1-5,
.col-lg-1-5 {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
}

.col-xs-1-5 {
  width: 20%;
  float: left;
}

@media (min-width: 768px) {
  .col-sm-1-5 {
    width: 20%;
    float: left;
  }
}

@media (min-width: 992px) {
  .col-md-1-5 {
    width: 20%;
    float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-1-5 {
    width: 20%;
    float: left;
  }
}
</style>